import React, { useState } from "react";
import { Button, Flex, Table, Image, Tag } from "antd";
import type { TableColumnsType } from "antd";
import { DataType, ITabelListProps } from "../../interface/IUserList";

export default function TableList(props: ITabelListProps) {
  const columns: TableColumnsType<DataType> = [
    { title: "ID", dataIndex: "id" },
    { title: "账号", dataIndex: "username" },
    { title: "姓名", dataIndex: "realname" },
    { title: "年龄", dataIndex: "age" },
    {
      title: "性别",
      dataIndex: "sex",
      render: (_: any, record: DataType) => {
        return record.sex === 1 ? (
          <Tag color="#108ee9">男</Tag>
        ) : (
          <Tag color="#FFCCCC">女</Tag>
        );
      },
    },
    { title: "生日", dataIndex: "birthday" },
    {
      title: "头像",
      dataIndex: "avatar",
      render: (_: any, record: DataType) => {
        return <Image width={80} src={record.avatar} />;
      },
    },
    { title: "城市", dataIndex: "city" },
    { title: "地址", dataIndex: "address" },
    {
      title: "操作",
      dataIndex: "",
      render: (_: any, record: DataType) => {
        // console.log(_,record)
        return (
          <Flex gap="small">
            <Button color="primary" variant="solid" onClick={()=>props.setEditData(record)}>
              编辑
            </Button>
            <Button color="danger" variant="solid">
              删除
            </Button>
          </Flex>
        );
      },
    },
  ];

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    props.setSelecteList(newSelectedRowKeys as number[]);
  };

  const rowSelection = {
    selectedRowKeys: props.selectList,
    onChange: onSelectChange,
  };

  return (
    <Flex gap="middle" vertical>
      <Table<DataType>
        rowSelection={rowSelection}
        columns={columns}
        dataSource={props.dataSource}
        loading={props.loading}
        pagination={false}
      />
    </Flex>
  );
}
